<template>
  <div class="detail" v-if="dateli">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.push(next)"
      class="hmNavbar"
      fixed
    />

    <div class="date">
      <div class="title">
        {{ dateli.title }}
      </div>
      <div class="name">
        <div class="imgs">
          <van-image :src="dateli.aut_photo">
            <template v-slot:error>
              <img class="n1" src="@/assets/Snipaste.png" alt="" />
            </template>
          </van-image>
        </div>
        <div class="n2">
          <!-- <van-icon class="fire" name="fire" /> -->
          <div>{{ dateli.aut_name }}</div>
          <div class="n2-item">{{ dateli.pubdate | fromtime }}</div>
        </div>
        <!-- :class="{ color: dateli.is_followed }" -->
        <van-button @click="followclick(dateli.is_followed)">{{
          dateli.is_followed ? '已关注' : '+关注'
        }}</van-button>
      </div>
      <!-- <div class="text" v-html="dateli.content"></div> -->
      <van-cell>
        <template #title>
          <div class="text" v-html="dateli.content"></div>
        </template>
      </van-cell>
      <div class="butt ">
        <van-button
          @click="dianz(dateli.attitude)"
          :class="{ color: dateli.attitude === 1 }"
          round
          icon="like"
          >点赞</van-button
        >
        <van-button
          @click="noLove(dateli.attitude)"
          :class="{ color: dateli.attitude === 0 }"
          round
          >不喜欢</van-button
        >
      </div>
    </div>
    <div class="commentss" id="chatContent">
      <van-list
        v-if="bol"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <div
          class="comment"
          :id="'chat' + index"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="image left">
            <van-image class="imageitem" :src="item.aut_photo">
              <template v-slot:error>
                <img class="code" src="@/assets/Snipaste.png" alt="" />
              </template>
            </van-image>
          </div>
          <div class="right">
            <div class="r1">
              <div class="r1-name">{{ item.aut_name }}</div>
              <div class="liks" @click="likeclick(item, item.is_liking, index)">
                <van-icon name="like" :class="{ color: item.is_liking }" />
                {{ item.like_count }}
              </div>
            </div>
            <div class="r2">
              {{ item.content }}
            </div>
            <div class="r3">
              <div class="r3-date">{{ item.pubdate | fromtime }}</div>
              <div class="r3-page" @click="brnclcik(item, index)">
                {{ item.reply_count }}回复
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="bottom">
      <div class="firld">
        <div class="f1" @click="popupclck">
          <div class="f1-inpit">请发表评论</div>
        </div>
        <div class="f2">
          <van-icon
            @click="dianz(dateli.attitude)"
            :class="{ color: dateli.attitude === 1 }"
            name="like"
          />
        </div>
        <div class="f3" @click="abc">
          <van-icon :badge="list.length ? list.length : ''" name="comment" />
        </div>
        <div class="f4"><van-icon name="share" /></div>
      </div>
    </div>
    <div class="popup">
      <van-popup v-model="pop_up" position="bottom" :style="{ height: '35%' }">
        <van-field v-model.trim="sms" rows="5" type="textarea"> </van-field>
        <div class="p2">
          <van-button size="normal" color="#d0584d" @click="addcommit"
            >发送</van-button
          >
        </div>
      </van-popup>
    </div>
    <!-- <critic :show="show" @criticlick="showDiglog"></critic> -->
    <critic
      :listss="list"
      :index="index"
      :item="connitxq"
      :idd="id"
      @amend="onamend"
      v-model="show"
      @likediss="likedi"
    ></critic>
  </div>
</template>

<script>
import { apiGetDetail, apiZan, apiDiszan, apiDislike } from '../../api/article'
import {
  apiGetComment,
  apiAddComment,
  apiAddCommentlikings,
  apiAddCommentlikingsID
} from '../../api/comment'
import { apiFollow, apiUnFollow, apiGetUser } from '../../api/use'
import '../../filter/myfilter'
import critic from './critic'
import { localGet } from '@/utils/mylocal'

export default {
  data () {
    return {
      sms: '',
      show: false,
      id: this.$route.params.artid,
      next: this.$route.query.next,
      dateli: '',
      loading: false,
      finished: false,
      art_id: '',
      offset: undefined,
      limit: 11,
      list: [],
      connitxq: '',
      bol: true,
      index: -1,
      pop_up: false,
      message: ''
    }
  },
  created () {
    this.refresh()
  },
  components: {
    critic
  },

  methods: {
    abc () {
      document.getElementById('chatContent').scrollIntoView()
    },
    // scrollToBottom () {
    //   this.$nextTick(() => {
    //     this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight
    //   })
    // },
    // 子组件评论被点赞事件
    likedi (item) {
      // console.log(item)
      this.likeclick(item, item.is_liking, this.index)
    },
    async popupclck () {
      if (this.$store.state.isLogin) {
        this.pop_up = true
      } else if (localGet('token')) {
        const res = await apiGetUser()
        this.$store.commit('setUserInfo', res.data.data)
        this.$store.commit('setIsLogin', true)
      } else {
        this.$dialog
          .confirm({
            title: '提示',
            message: '您当前没有登录,还不能发布评论,去登录'
          })
          .then(() => {
            this.$router.push('/login?next=' + this.$route.fullPath)
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    onamend (inde) {
      this.list[inde].reply_count++
    },
    // 对评论点赞
    async likeclick (item, dates, index) {
      const com = item.com_id.c[0] + '' + item.com_id.c[1]
      if (!dates) {
        const res = await apiAddCommentlikings(com)
        console.log(res)
        window.console.log('1111', this.list[index].like_count)
        this.list[index].is_liking = true
        this.list[index].like_count++
      } else {
        this.list[index].is_liking = false
        this.list[index].like_count--
        const res2 = await apiAddCommentlikingsID(com)
        console.log('res2', res2)
      }
    },
    // 对文章不喜欢的点击事件
    async noLove (item) {
      if (item !== 0) {
        const res = await apiDislike(this.id)
        this.dateli.attitude = 0
        console.log(res)
      } else if (item === 0) {
        this.dateli.attitude = -1
      }
      this.$toast.success('ok')
    },
    async refresh () {
      const res = await apiGetDetail(this.id)
      this.dateli = res.data.data
      console.log('文章数据', res)
    },
    // 对文章点赞
    async dianz (item) {
      if (item === 1) {
        this.dateli.attitude = -1
        const res = await apiDiszan(this.id)
        console.log(res)
      } else {
        this.dateli.attitude = 1
        const res = await apiZan(this.id)
        console.log('点赞事件', res)
        this.$toast.success(res.data.data.message)
      }
    },
    // 点击发送按钮事件
    async addcommit () {
      console.log(this.id)
      if (this.sms.length !== 0) {
        const res = await apiAddComment({
          artid: this.id,
          content: this.sms
        })
        this.loading = false
        this.offset = undefined
        this.finished = false
        this.limit = 11
        this.list = []
        this.sms = ''
        this.bol = false
        this.pop_up = false
        console.log('发表评论事件', res)

        document.getElementById('chatContent').scrollIntoView()
        this.$nextTick(() => {
          this.bol = true
          const ss =
            document.getElementById('chat1') ||
            document.getElementById('chatContent')
          ss.scrollIntoView(true, {
            behavior: 'smooth',
            block: 'end',
            inline: 'nearest'
          })
          console.log(ss)
        })
      }
      // this.$nextTick(() => {})
      console.log(this.$store.state.userInfo)
    },
    // 关注用户
    async followclick (item) {
      if (!item) {
        const res = await apiFollow(this.dateli.aut_id)
        this.dateli.is_followed = true
        console.log('关注用户事件', res)
      } else {
        this.dateli.is_followed = false
        const res = await apiUnFollow(this.dateli.aut_id)
        console.log('取消关注用户事件', res)
      }
    },
    // 点击弹出回复评论界面
    brnclcik (item, index) {
      this.show = true
      this.connitxq = item
      this.index = index
    },
    // 评论自动加载事件
    async onload () {
      const res = await apiGetComment({
        artid: +this.id,
        offset: this.offset,
        limit: this.limit
      })
      this.list.push(...res.data.data.results)
      if (res.data.data.results.length === 0) {
        this.offset = undefined
      } else {
        this.offset = res.data.data.last_id
      }

      this.loading = false
      if (this.list.length === res.data.data.total_count) {
        this.finished = true
      }
      console.log('自动加载评论事件', res)
    }
  }
}
</script>

<style lang="less">
.detail {
  width: 100%;
  padding-bottom: 60px;
  min-height: 750px;
  background-color: rgb(255, 255, 255);
  position: relative;
  // overflow: auto;
  .coloe {
    width: 100%;
    background-color: #d0584d;
  }
  .van-nav-bar__content {
    background: #d0584d;
    .van-nav-bar__title {
      color: white;
    }
    .van-icon-arrow-left::before {
      color: #fff;
    }
  }
  .date {
    // width: 100%;
    padding: 0 15px;
    .title {
      margin: 25px 0;
      font-size: 16px;
      font-weight: 600;
    }
    .van-cell {
      padding: 0 0 !important;
      .van-cell__title {
        .text {
          per {
            margin: 0;
          }
        }
      }
    }
    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .imgs {
        width: 45px;
        height: 45px;
        .van-image {
          width: 45px;
          height: 45px;
          background-color: bisque;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: 10px;
        }
      }
      .n1 {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .n2 {
        flex: 1;
        font-size: 14px;
        margin-left: 10px;
        .n2-item {
          font-size: 12px;
          color: #ccc;
        }
        // .fire {
        //   font-size: 30px;
        //   color: #d0584d;
        //   margin: 10px;
        // }
      }
      .van-button {
        font-size: 12px;
        color: #fff;
        width: 75px;
        height: 30px;
        border-radius: 15px;
        background-color: #d0584d;
      }
    }
    .text {
      // transform: scale(0.8);
      background-color: rgb(255, 255, 255);
      font-size: 14px;
      // text-indent: 2em;
      color: #313636;
      margin: 25px 0;
      width: 100%;
      word-break: break-all;
      word-wrap: break-word !important;
      overflow-x: hidden;
      img {
        max-width: 100%;
        // width: 100%;
      }
      h1 {
        font-size: 18px;
      }
      h2 {
        font-size: 16px;
      }
      h3 {
        font-size: 14px;
      }
    }
    .butt {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      border: 0px solid transparent;
      .van-button {
        border-radius: 20px;
        height: 40px;
        padding: 15px;
        font-size: 14px;
        color: #3c3c3c;
      }
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: -4px;
    left: 0;
    height: 60px;
    // .van-field__body {
    //   input {
    //     border: 1px solid #ccc;
    //     padding: 8px;
    //     border-radius: 25px;
    //   }
    // }
    .firld {
      padding: 0 15px;
      background-color: rgb(255, 255, 255);
      display: flex;
      font-size: 18px;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      .f1 {
        flex: 1;
        padding: 5px 10px 5px;
        background-color: rgb(248, 248, 248);
        margin-right: 15px;
        border-radius: 5px;
        font-size: 12px;
        color: #ccc;
        border: 1px solid rgb(175, 175, 175);
      }
      .f2,
      .f3,
      .f4 {
        margin-top: 5px;
        margin-left: 15px;
      }
    }
  }
  .popup {
    .van-popup {
      .van-field__body {
        border: 1px solid rgb(197, 197, 197);
        background-color: #fffafa;
        border-radius: 10px;
        padding: 10px;
        font-size: 16px;
        color: #ccc;
      }
      .p2 {
        position: relative;
        .van-button {
          position: absolute;
          right: 15px;
          top: 5px;
          border-radius: 15px;
          height: 30px;
        }
      }
    }
  }
  .comment {
    padding: 0 15px;
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .image {
      .imageitem {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        background-color: blanchedalmond;
        .code {
          width: 100%;
          height: 100%;
        }
      }
    }
    .left {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .right {
      flex: 1;
      font-size: 14px;
      .r1 {
        display: flex;
        // color: #b4a9a0;
        align-items: center;
        line-height: 40px;
        justify-content: space-between;
        .van-icon {
          color: #3a3836;
          font-size: 18px;
        }
        .liks {
          display: flex;
          align-items: center;
        }
      }
      .r2 {
        font-size: 16px;
        line-height: 25px;
        margin-right: 15px;
        word-break: break-all;
        word-wrap: break-word !important;
      }
      .r3 {
        margin-top: 10px;
        display: flex;
        align-items: center;
        .r3-date {
          font-size: 12px;
          color: rgb(194, 193, 193);
          margin-right: 30px;
        }
        .r3-page {
          font-size: 14px;
          padding: 5px 15px;
          border-radius: 20px;
          background-color: #e4e4e4;
        }
      }
    }
  }
  .color {
    color: #d0584d !important;
  }
}
</style>
